<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 8px;padding-bottom: 20px" >
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>新增用户</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="manager" :rules="rules" ref="managerForm" label-width="100px" style="width: 500px" size="small">
            <el-form-item label="用户名" prop="manAccount">
                <el-input v-model="manager.manAccount" placeHolder="输入管理员用户名"/>
            </el-form-item>
            <el-form-item label="密码" prop="manPwd">
                <el-input v-model="manager.manPwd" type="password" placeHolder="输入密码"/>
            </el-form-item>
            <el-form-item label="再次输入密码" prop="checkPass">
                <el-input type="password" v-model="manager.checkPass" placeHolder="再次输入密码"/>
            </el-form-item>
            <el-form-item label="身份证" prop="manId">
                <el-input  v-model="manager.manId" placeHolder="请输入身份证号"/>
            </el-form-item>
            <el-form-item label="性别" prop="manSex">
                <el-radio-group v-model="manager.manSex">
                    <el-radio label="m" >男</el-radio>
                    <el-radio label="f" >女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号" prop="manTelNumber">
                <el-input  v-model="manager.manTelNumber" placeHolder="请输入手机号"/>
            </el-form-item>
            <el-form-item label="email" prop="manEmail">
                <el-input  v-model="manager.manEmail" placeHolder="email"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="registry('managerForm')" v-bind:disabled="regBtnSts">立即创建</el-button>
                <el-button @click="clear">清空</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "AddUser",
        methods:{
            registry(){
                //将提交按钮设置为不可用状态
                this.regBtnSts=true;
                //1.先验证表单没问题了在发送
                let form=this.$refs['managerForm'];
                form.validate((valid)=>{
                    if (valid){
                        //进行表单的提交
                        //clone对象
                        let payLoad=_.clone(this.manager);
                        //删除payLoad的checkPass;
                        delete payLoad.checkPass;
                        axios.post("/manager/save", payLoad).then(response=>{
                            this.regBtnSts=false;
                            this.clear();
                            if(response.data==='success'){
                                this.$message({
                                   title:'提示',
                                    message:"用户保存成功",
                                    type:'success'
                                })
                            }
                        })
                    }else{
                        this.regBtnSts=false;
                        return false;
                    }
                })
            },
            clear(){
                this.manager={
                    manAccount:"",
                    manPwd:"",
                    manId:"",
                    manSex:"",
                    manTelNumber:"",
                    manEmail:"",
                    checkPass:''
                }
            }
        },
        data(){
            let validAccount = (rules,value,callback)=>{
               axios.get("/manager/valid/"+value).then(response=>{
                   if(response.data.dup==true){
                       callback(new Error("用户名重复"));
                   }else{
                       callback();
                   }
               })

            };
            let validPwd = (rules,value,callback)=>{
                //判断密码长度6-20之间，不能为空，
                if (!value||value===''){
                    return callback(new Error("密码不能为空"));
                }
                if (value.length<6||value.length>20){
                    return callback(new Error("密码长度6-20之间"));
                }
                return callback();
            };

            let validPwd2=(rules,value,callback)=>{
                //验证密码是否与第一次输入一致
                if(this.manager.manPwd!==value){
                    return callback(new Error("两次密码输入不一致"));
                }else {
                    return callback();
                }
            };

            let validId = (rules,value,callback)=>{
                if (!value||value==''){
                    return callback(new Error("身份证不能为空"))
                }
                let partten=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
                if (!partten.test(value)){
                    return callback(new Error("身份证格式错误，请重新输入"))
                }
                return callback();
            };
            let validPhone = (rules,value,callback)=>{
                if (!value||value==''){
                    return callback(new Error("手机号不能为空"))
                }
                let partten=/^1[3|4|5|7|8|9][0-9]\d{8}$/;
                if (!partten.test(value)){
                    return callback(new Error("手机号格式错误，请重新输入"))
                }
                return callback();
            };
            let validEmail = (rules,value,callback)=>{
                if (!value||value==''){
                    return callback(new Error("邮箱不能为空"))
                }
                let partten=/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                ;
                if (!partten.test(value)){
                    return callback(new Error("邮箱格式错误，请重新输入"))
                }
                return callback();
            };

            return{
                regBtnSts:false,
                manager:{
                    manAccount:"",
                    manPwd:"",
                    manId:"",
                    manSex:"",
                    manTelNumber:"",
                    manEmail:"",
                    checkPass:''
                },

                rules:{
                    manAccount:[
                        {required:true,message:"用户名不能为空",trigger:"blur"},
                        {max:20,min:6,message: "用户名6-20之间",trigger: "blur"},
                        {validator:validAccount,trigger:"blur"}
                    ],
                    checkPass:[
                        {validator:validPwd2,trigger:"blur"}
                    ],
                    manPwd:[
                        {validator:validPwd,trigger:"blur"}
                    ],
                    manId:[
                        {validator:validId,trigger:"blur"}
                    ],
                    manSex:[
                        {required:true,message:"请选择性别",trigger:"change"}
                    ],
                    manTelNumber:[
                        {validator:validPhone,trigger:"blur"}
                    ],
                    manEmail:[
                        {validator:validEmail,trigger:"blur"}
                    ]
                }
            }
        }

    }
</script>

<style scoped>

</style>